import React, { PureComponent } from 'react'
import { View,Text,FlatList,Alert,Modal,TouchableOpacity,StyleSheet,Animated } from 'react-native'
import FeedCell from './FeedCell';
import ImageBrowser from './ImageBrowser';
import VideoPlayPage from './VideoPlayPage';
import SearchBar from './SearchBar';

function Feed(avatar,username,userdesc,content,images,key,media) {
  this.avatar = avatar;
  this.username = username;
  this.userdesc = userdesc;
  this.content = content;
  this.images = images;
  this.key = key;
  this.media = media;
}

export default class RecommendPage extends PureComponent {
  static navigationOptions = ({ navigation }) => ({
    title: '推荐',
    headerTintColor: 'black',
    headerStyle: { backgroundColor: 'white' }  
  });
  constructor() {
    super();
    this.state = {
      showSearchBar: false,
      dataList: [],
      modalVisible: false,
      images: []
    }
  }

  componentWillMount() {
    let json = require('./TrendHot.json');
    if (json.data) {
      this.setState({dataList: json.data});
    }
  }

  renderCell(itemData) {
    let {item} = itemData;
    return (
      <FeedCell
        data={item}
        avatarPress={()=>{}}
        imagePress={(index)=>{
          this.setState({
            modalVisible: true,
            images: item.pictureUrls
          });
        }}
        commentPress={()=>this.props.navigation.navigate('comment',{data:item})}
        videoPress={()=>this.props.navigation.navigate('video')}
      />
    )
  }

  render() {
    return (
      <View style={{backgroundColor:'white',flex:1}}>
        <FlatList
          style={{flex:1}}
          data={this.state.dataList}
          keyExtractor={(item)=>item.id}
          renderItem={this.renderCell.bind(this)}
          onScroll={this.flatListOnScroll.bind(this)}
        />
        {/* {
          this.state.showSearchBar ? (
            <View style={styles.navBar}>
              <SearchBar 
                style={styles.searchBar}
                placeholder='绿城回应保姆纵火'
              >
              </SearchBar>
            </View>
          ) : null
        } */}
      </View>
    )
  }

  flatListOnScroll(event) {
    let offsetY = event.nativeEvent.contentOffset.y;
    if (offsetY > 200) {
      if (!this.state.showSearchBar) {
        this.setState({showSearchBar: true});        
      }
    } else {
      if (this.state.showSearchBar) {
        this.setState({showSearchBar: false});        
      }
    }
  }
}

const styles = StyleSheet.create({
  navBar: {
    backgroundColor: 'white',
    flexDirection: 'row',
    alignItems: 'center',
    position:'absolute',
    left:0,
    top:0,
    right:0,
    height:64,
  },
  searchBar: {
    position: 'absolute',
    left: 10,
    right: 10,
    bottom: 10
  }
});